import React from 'react';
import {Form, Input, Button, DatePicker} from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';

const FormItem = Form.Item;
const { TextArea } = Input;


class ActivityAdd extends React.Component {
  render () {
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };

    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="E-mail" {...formItemLayout}>
          {getFieldDecorator ('email', {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          }) (<Input />)}
        </FormItem>
        <FormItem {...formItemLayout} label="开始时间">
          {getFieldDecorator ('startTime', {
            rules: [{ type: 'object', required: true, message: 'Please select time!' }],
          }) (
            <DatePicker  className="page-activity-time" locale={locale} showTime format="YYYY-MM-DD HH:mm:ss" />
          )}
        </FormItem>
        <FormItem {...formItemLayout} label="结束时间">
          {getFieldDecorator ('endTime', {
            rules: [{ type: 'object', required: true, message: 'Please select time!' }],
          }) (
            <DatePicker className="page-activity-time" locale={locale} showTime format="YYYY-MM-DD HH:mm:ss" />
          )}
        </FormItem>
        <FormItem label="说明" {...formItemLayout}>
          {getFieldDecorator ('desc') (<TextArea rows={4} />)}
        </FormItem>
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">确定</Button>
        </FormItem>
      </Form>
    );
  }
}

export default Form.create () (ActivityAdd);
